﻿@model ProductDetailsModel
@using Nop.Core
@using Nop.Core.Domain.Seo;
@using Nop.Core.Infrastructure;
@using Nop.Services.Localization;
@using Nop.Web.Models.Catalog;
@{
    Layout = "~/Views/Shared/_ColumnsOne.cshtml";

    //title, meta
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);

    var seoSettings = EngineContext.Current.Resolve<SeoSettings>();

    //canonical URL
    if (seoSettings.CanonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme);
        Html.AddCanonicalUrlParts(productUrl);
    }

    //open graph META tags
    if (seoSettings.OpenGraphMetaTags)
    {
        var storeName = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.GetLocalized(x => x.Name);
        Html.AddHeadCustomParts("<meta property=\"og:type\" content=\"product\" />");
        Html.AddHeadCustomParts("<meta property=\"og:title\" content=\"" + Html.Encode(Model.Name) + "\" />");
        Html.AddHeadCustomParts("<meta property=\"og:description\" content=\"" + Html.Encode(Model.MetaDescription) + "\" />");
        Html.AddHeadCustomParts("<meta property=\"og:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\" />");
        Html.AddHeadCustomParts("<meta property=\"og:url\" content=\"" + Request.Url.AbsoluteUri + "\" />");
        Html.AddHeadCustomParts("<meta property=\"og:site_name\" content=\"" + Html.Encode(storeName) + "\" />");
    }

    //Twitter META tags
    if (seoSettings.TwitterMetaTags)
    {
        var storeName = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.GetLocalized(x => x.Name);
        Html.AddHeadCustomParts("<meta property=\"twitter:card\" content=\"summary\" />");
        Html.AddHeadCustomParts("<meta property=\"twitter:site\" content=\"" + Html.Encode(storeName) + "\" />");
        Html.AddHeadCustomParts("<meta property=\"twitter:title\" content=\"" + Html.Encode(Model.Name) + "\" />");
        Html.AddHeadCustomParts("<meta property=\"twitter:description\" content=\"" + Html.Encode(Model.MetaDescription) + "\" />");
        Html.AddHeadCustomParts("<meta property=\"twitter:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\" />");
        Html.AddHeadCustomParts("<meta property=\"twitter:url\" content=\"" + Request.Url.AbsoluteUri + "\" />");
    }
}
<!--product breadcrumb-->
@Html.Partial("_ProductBreadcrumb", Model.Breadcrumb)
@Html.Widget("productdetails_after_breadcrumb", Model.Id)
<div class="page product-details-page" id="j-product-details-page">
    <div class="page-body">
        @Html.Widget("productdetails_top", Model.Id)
        @using (Html.BeginRouteForm("Product", new { SeName = Model.SeName }, FormMethod.Post, new { id = "product-details-form" }))
        {
            <div itemscope itemtype="http://schema.org/Product" data-productid="@Model.Id">
                <div class="product-essential clearfix">
                    @*sharebuttons*@
                    @Html.Partial("_ShareButton", Model)
                    @Html.Widget("productdetails_before_pictures", Model.Id)
                    <div class="gallery">
                        <!--product pictures-->
                        @Html.Partial("_ProductDetailsPictures", Model)
                    </div>
                    @Html.Widget("productdetails_after_pictures", Model.Id)
                    <div class="overview">
                        <div class="product-name">
                            <h1 itemprop="name">
                                @Model.Name
                            </h1>
                        </div>
                        @if (!String.IsNullOrEmpty(Model.ShortDescription))
                        {
                            <div class="short-description">
                                @Html.Raw(Model.ShortDescription)
                            </div>
                        }
                        <!--price-->
                        @{
                        var dataDictPrice = new ViewDataDictionary();
                        dataDictPrice.TemplateInfo.HtmlFieldPrefix = string.Format("price_{0}", Model.Id);
                        <div class="price-pane">
                            @Html.Partial("_ProductPrice", Model.ProductPrice, dataDictPrice)
                            @*always show free shipping*@
                            <div class="free-shipping" title="free shipping via `China Post Air Mail`">@T("Products.FreeShipping")</div>
                            @*@if (Model.FreeShippingNotificationEnabled && Model.IsFreeShipping)
                            {
                                <div class="free-shipping">@T("Products.FreeShipping")</div>
                            }*@
                        </div>
                        }
                        @Html.Widget("productdetails_overview_top", Model.Id)
                        <div class="overview-essential" id="scroll-shopping-cart">
                            <!--product SKU, manufacturer part number, stock info-->
                            @Html.Partial("_SKU_Man_Stock", Model)
                            <!--Back in stock subscription-->
                            @*@Html.Partial("_BackInStockSubscription", Model)*@

                            @Html.Partial("_ProductTierPrices", Model.TierPrices)

                            @*<!--product manufacturers-->
                                @Html.Partial("_ProductManufacturers", Model.ProductManufacturers)*@

                            @* <!--sample download-->
                                @Html.Partial("_DownloadSample", Model)*@
                            <!--attributes-->
                            @{
                            var dataDictAttributes = new ViewDataDictionary();
                            dataDictAttributes.TemplateInfo.HtmlFieldPrefix = string.Format("attributes_{0}", Model.Id);
                            @Html.Partial("_ProductAttributesNew", Model.ProductAttributes, dataDictAttributes)
                            }
                            <!--gift card-->
                            @{
                            var dataDictGiftCard = new ViewDataDictionary();
                            dataDictGiftCard.TemplateInfo.HtmlFieldPrefix = string.Format("giftcard_{0}", Model.Id);
                            @Html.Partial("_GiftCardInfo", Model.GiftCard, dataDictGiftCard)
                            }
                            @*<!--rental products-->
                                @{
                                    var dataDictRental = new ViewDataDictionary();
                                    dataDictRental.TemplateInfo.HtmlFieldPrefix = string.Format("rental_{0}", Model.Id);
                                    @Html.Partial("_RentalInfo", Model, dataDictRental)
                                    }*@
                            <!-- add to cart-->
                            <div class="overview-essential-bottom">
                                @{
                            var dataDictAddToCart = new ViewDataDictionary();
                            dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", Model.Id);
                            @Html.Partial("_AddToCart", Model.AddToCart, dataDictAddToCart)
                                }
                                @Html.Partial("_ProductEmailAFriendButton", Model)
                            </div>
                            @*@Html.Partial("_CompareProductsButton", Model)*@
                        </div>
                        @Html.Widget("productdetails_overview_bottom", Model.Id)
                    </div>
                </div>
                @Html.Widget("productdetails_before_collateral", Model.Id)
                <div class="product-collateral clearfix">
                    <ul class="nav nav-tabs" id="scroll-nav-tabs">
                        <li class="active"><a href="#scroll-overview" class="scroll-trigger">Overview</a></li>
                        <li><a href="#scroll-pictures" class="scroll-trigger">Pictures</a></li>
                        <li><a href="#scroll-shipping-payment" class="scroll-trigger">Shipping &amp; Payment</a></li>
                        <li><a href="#scroll-guarantees" class="scroll-trigger">Guarantees</a></li>
                        <li><a href="#scroll-related-products" class="scroll-trigger">@T("Products.RelatedProducts")</a></li>
                        <li><a href="#scroll-product-also-purchased" class="scroll-trigger">Who bought this item also bought</a></li>
                        <!--product reviews-->
                        <li><a href="#scroll-rating-reviews" class="scroll-trigger">Ratings &amp; Reviews(@Model.ProductReviewOverview.TotalReviews)</a></li>
                    </ul>
                    @*tab content for overview.*@
                    <div id="scroll-overview" class="overview-tab-box box-content">
                        <span class="floor-number">1</span>
                        <div class="title">Overview</div>
                        @Html.Partial("_ProductSpecifications", Model.ProductSpecifications)
                        @if (!String.IsNullOrEmpty(Model.FullDescription))
                        {
                            <div class="full-description" itemprop="description">
                                @Html.Raw(Model.FullDescription)
                            </div>
                        }
                        @Html.Partial("_ProductTags", Model.ProductTags)

                    </div>
                    <!--product full size pictures-->
                    @Html.Partial("_ProductFullSizePictures", Model)
                    @*tab content for shipping payment*@
                    <div id="scroll-shipping-payment" class="shipping-payment-tab-box box-content">
                        <span class="floor-number">3</span>
                        <div class="title">Shipping &amp; Payment</div>
                        <div class="shipping-and-payment">
                            <table class="content-table">

                                <tr>
                                    <td colspan="2" class="title">
                                        Shipping Introduced
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 150px;">Shipping Methods:</td>
                                    <td>China Register Mail(CRM), DHL, UPS, EMS</td>
                                </tr>
                                <tr>
                                    <td>Prepare Orders:</td>
                                    <td>It will take us 3-5 days to prepare your order.</td>
                                </tr>
                                <tr>
                                    <td>Free Shipping</td>
                                    <td>
                                        Usually it will take you 7-15 business days depends on what shipping methods you choose and where you are from.
                                        Please make sure your shipping address is correct before you place an order.You will bear all costs due to incorrect address you provided.
                                    </td>
                                </tr>
                                <tr>
                                    <td>Disclaimer: </td>
                                    <td>
                                        If your package lost, we guarantee do 100% refund or resend for you.
                                        Import duties, taxes are not included in the item price or shipping fees, If by chance, you are
                                        asked to charge duties, it's from the customs in your country ,But please do not worry! This matter very seldom happens.
                                    </td>
                                </tr>
                                <tr>
                                    <td>Tracking Order:</td>
                                    <td>
                                        <div>EMS:&nbsp;&nbsp;<a rel="nofollow" href="http://www.ems.com.cn/english.html">http://www.ems.com.cn/english.html</a></div>
                                        <div>CRM:&nbsp;&nbsp;<a rel="nofollow" href="http://17track.net/">http://17track.net/</a></div>
                                        <div>DHL:&nbsp;&nbsp;<a rel="nofollow" href="http://www.dhl.com">http://www.dhl.com</a></div>
                                        <div>FEDEX:&nbsp;&nbsp;<a rel="nofollow" href="http://www.fedex.com">http://www.fedex.com</a></div>
                                    </td>
                                </tr>

                            </table>
                            <br>
                            <table class="content-table">
                                <tr>
                                    <td class="title" colspan="2">Payment Description</td>
                                </tr>
                                <tr>
                                    <td style="width: 150px;">
                                        <div>
                                            <img src="@Url.GetBaseUrl(path: "Content/Images/help/paypal.gif")">
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            We prefer you pay by paypal since it is fast and reliable. If you don't have paypal,
                                            we also accept bank transfer. However, it needs several days for us to confirm the
                                            bank transfer payment, so if you are urgent for the dress, please do not pay by
                                            bank transfer but in paypal or western union. For details about payment options
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <a style="font-weight:bold;" href="@Url.RouteUrl("ContactUs")">Contact Us</a> If you have any questions or doubt. Welcome to email us, and our staff
                                        will give you a satisfactory answer in 12 hours.
                                    </td>
                                </tr>

                            </table>
                        </div>

                    </div>
                    <div id="scroll-guarantees" class="guarantees-tab-box box-content">
                        <span class="floor-number">4</span>

                        <div class="title">Guarantees</div>
                        <table class="content-table">
                            <tr>
                                <td style="width: 150px;">Return Policy</td>
                                <td>
                                    <p>
                                        It is important that you are 100% happy with your purchase on Clothesgate.com. If you are not 100% satisfied with your purchase because of the quality problem or other issues, you can simply return them for full refund or exchange in 30 days.Please note the credits will not be refunded if you return a free order/giveaway.
                                        You can return the items within 30 days of delivery for a full refund or exchange.
                                        All items must be returned in their original condition, unworn, unwashed, with all tags attached. Returns that are damaged, soiled, altered, may not be accepted.
                                        Please send us an email(<a href="mailto:service@clothesgate.com"> service@clothesgate.com</a>) before you return your item,or download <a href="@Url.GetBaseUrl(path: "Content/files/ReturnExchange_form.doc")">the return or exchange form</a>, fill it and send it to service@clothesgate.com.
                                    </p>
                                    <p>Please do not send back your parcel until we e-mail you with the appropriate address which is not displayed on your parcel.</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    @Html.Action("RelatedProducts", "Product", new { productId = Model.Id })
                    @Html.Action("ProductsAlsoPurchased", "Product", new { productId = Model.Id })
                    @*tab content for ratingReviews*@
                    @Html.Partial("_ProductReviewOverview", Model.ProductReviewOverview)
                </div>
            </div>
        }
        <script type="text/javascript">
            seajs.use("common/1.0.0/index", function (app) {
                app(function () {
                    //add to cart button addproducttocart_details
                    app("#j-product-details-page").on("click", ".add-to-cart-button", function (evt) {
                        evt.preventDefault();
                        var add2cartLink = app(this).data("addcartlink");
                        app.ajaxCart.addproducttocart_details(add2cartLink, '#product-details-form');
                    });
                    //add to wishlist button
                    app("#j-product-details-page").on("click", ".add-to-wishlist-button", function (evt) {
                        evt.preventDefault();
                        var add2wishlistLink = app(this).data("addwishlistlink");
                        app.ajaxCart.addproducttocart_details(add2wishlistLink, '#product-details-form');
                    });
                });
            });
        </script>
        @Html.Widget("productdetails_bottom", Model.Id)
    </div>
</div>

@*waypoint for product detail tab information*@
<div id="sticky" class="navbar">
    <div class="container">
        <ul class="nav nav-tabs" id="scroll-nav-tabs-waypoint">
            <li class="active"><a href="#scroll-overview" class="scroll-trigger">Overview</a></li>
            <li><a href="#scroll-pictures" class="scroll-trigger">Pictures</a></li>
            <li><a href="#scroll-shipping-payment" class="scroll-trigger">Shipping &amp; Payment</a></li>
            <li><a href="#scroll-guarantees" class="scroll-trigger">Guarantees</a></li>
            <li><a href="#scroll-related-products" class="scroll-trigger">@T("Products.RelatedProducts")</a></li>
            <li><a href="#scroll-product-also-purchased" class="scroll-trigger">Who bought this item also bought</a></li>
            <!--product reviews-->
            <li><a href="#scroll-rating-reviews" class="scroll-trigger">Ratings &amp; Reviews(@Model.ProductReviewOverview.TotalReviews)</a></li>
            <li class="scroll-shopping-cart"><a href="#scroll-shopping-cart" class="scroll-trigger">Shopping Cart</a></li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    seajs.use(["jquery", "scrollto/1.0.0/index"], function ($, scrollTo) {
        $(function () {
            $("#scroll-nav-tabs-waypoint, #scroll-nav-tabs").on("click", "li", function (e) {
                e.preventDefault();
                var $this = $(this);
                var $target = $($this.find("a.scroll-trigger").attr("href"));
                if ($target.length) {
                    $this.addClass("active").siblings("li").removeClass("active");
                    scrollTo($target, 500, {
                        onAfter: function () {
                            $target.addClass("active").siblings(".box-content").removeClass("active");
                        },
                        offset: -45
                    });
                } else {
                    $this.addClass("disabled");
                }
            });
        });
    });
    seajs.use(["jquery", "waypoint/1.0.0/index"], function ($, wp) {
        $(function () {
            wp.waypoint("#scroll-nav-tabs", {
                handler: function (direction) {
                    //console.log(direction);
                    var $this = $("#sticky");
                    var outerHeight = $this.height();
                    var offset_waypoint = 0;
                    if (direction == 'down') {
                        $this.stop().animate({ "top": 0 });
                    } else {
                        $this.stop().animate({ "top": -outerHeight });
                    }
                }
            });
        });
    });

    seajs.use("common/1.0.0/index", function (app) {
        app(function () {
            app("#j-product-details-page").on("click", ".product-box-add-to-cart-button", function (evt) {
                evt.preventDefault();
                var add2cartLink = app(this).data("addcartlink");
                app.ajaxCart.addproducttocart_catalog(add2cartLink);
            });
        });
    });
</script>